This example is a modification of the in table icon trigger example. In this case, instead of using a modal to display the editing actions, an Editor instance on a different web-page is used. In fact, note that there is no Editor instance created on this page at all!
Instead, we create a popover window and use inter-window communication to tell the Editor instance in the other window what action we want to take and what row to take it on. Alternatively, you could link to a specific URL that triggers editing on a specific item (i.e. REST).
The intention of this example is to demonstrate the standalone editing actions that Editor can perform - in the popover window it will operate on a given row, without needing the DataTable, instead it will fetch the data and submit it to the server as needed.
This type of editing can be particularly useful if you want to display an editing form to a user, e.g. for their account information. You don't need the full
table, just edit a specific row (making sure you use a WHERE condition in such a use case!). Complex forms that take a lot of room can also benefit
from this type of display, rather than being constrained to a modal.
| Name | Position | Office | Extn. | Start date | Salary | ||
|---|---|---|---|---|---|---|---|
| Name | Position | Office | Extn. | Start date | Salary |
The JavaScript shown below is used to initialise the table shown in this example:
const table = new DataTable('#example', {
ajax: '/api/staff',
columns: [
{
data: null,
render: (data) => data.first_name + ' ' + data.last_name
},
{ data: 'position' },
{ data: 'office' },
{ data: 'extn' },
{ data: 'start_date' },
{ data: 'salary', render: DataTable.render.number(null, null, 0, '$') },
{
data: null,
className: 'dt-center editor-edit',
defaultContent: '<button><i class="fa fa-pencil"/></button>',
orderable: false
},
{
data: null,
className: 'dt-center editor-delete',
defaultContent: '<button><i class="fa fa-trash"/></button>',
orderable: false
}
],
layout: {
topStart: {
buttons: [
{
text: 'Create new record',
action: function () {
// Create new record
popover('create', null, 'Create new record');
}
}
]
}
}
});
// Edit record by opening a new window and triggering editing
table.on('click', 'td.editor-edit button', function (e) {
let id = e.target.closest('tr').id;
let data = table.row('#' + id).data();
popover('edit', id, `Edit record for ${data.first_name} ${data.last_name}`);
});
// Delete a record - Use a modal
table.on('click', 'td.editor-delete button', function (e) {
let id = e.target.closest('tr').id;
let data = table.row('#' + id).data();
popover('remove', id, `Delete record for ${data.first_name} ${data.last_name}`);
});
/**
* Trigger a popover window which will contain an Editor instance
*
* @param action The action to take
* @param id The row id to take the action on (null for create)
* @param title Form title to show
*/
function popover(action, id, title) {
let popup = window.open('./edit.html');
// Listen for the popup being ready
popup.addEventListener(
'load',
() => {
// Then send it a message with just the id. If you needed to send
// multiple messages, you could use JSON here.
popup.postMessage({
action,
id,
title
});
},
true
);
// Want to listen for a message coming back to say that the edit is done
window.addEventListener(
'message',
(e) => {
// Close the popup
popup.close();
// And reload the table
table.ajax.reload(null, false);
},
{ once: true }
);
}
In addition to the above code, the following JavaScript library files are loaded for use in this example:
The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:
This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:
td.editor-edit button,
td.editor-delete button {
background: transparent;
border: none;
color: inherit;
cursor: pointer;
}
The following CSS library files are loaded for use in this example to provide the styling of the table:
This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.
The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.